<template>
	<div style="position: relative;height: 100%;">
		<div v-if="sortSettingHidden" style="width: 100%;height: 100%;background-color: rgba(247,247,247,0.8);position: absolute;top: 20px;z-index: 999;"></div>
		<div style="width: 100%;height: 20px;background-color: #ebedf0;"></div>
		<Row style="margin-top: 20px;margin-bottom:20px;">
			<Col span="6">
			<span>年段：</span>
			<Select v-model="gradeSelect" @on-change="gradeSelectChange" style="width: 150px;">
				<Option v-for="item in gradeList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
			</Col>
			<Col span="6">
			<span>科目类型：</span>
			<Select v-model="subjectSelect" @on-change="subjectSelectChange" style="width: 150px;">
				<Option v-for="item in subjectList" :value="item.value" :key="item.value">{{item.label}}</Option>
			</Select>
			</Col>
		</Row>
		<div style="margin:5px 0px 0px 0px;padding: 20px;">
			<Row>
				<Col span="24" style="text-align: left;">
				<span style="font-size: 18px;color: #1a1a1a;font-weight: 540;">说明:</span><span style="font-size: 15px;color: #1a1a1a;font-weight: 540;">划分原始分各个科目的统计分数段</span>
				</Col>
			</Row>

		</div>
		<Row style="width: 100%;text-align: left;padding: 20px;">
			<Button type="primary" @click="edit" style="font-size: 15px;">编辑</Button>
			<Button type="primary" @click="confirm=true" style="font-size: 15px;margin-left: 20px;">恢复默认</Button>
		</Row>
		<Modal title="提示" v-model="confirm" :closable="false"  class-name="vertical-center-modal" @on-ok="initialization" @on-cancel="cancelmodel">
					<p>确定要恢复默认吗？</p>
			</Modal>
		<div style="padding: 10px 20px 20px 20px;margin-top: 20px;display: block;margin-bottom: 600px;">
			<div style="position: relative;">
				<Table border :columns="columns" :data="data1"></Table>
			</div>
		</div>
		<Col v-if="sortSettingHidden" span="10" style=" width: 600px; z-index: 1000;background-color: white;margin: auto;position: absolute;top: 200px;left: 0;right: 0;text-align: left;height:500px;border: 1px solid #e9eaec;padding: 10px;border-radius: 15px;">
		<Row style="width: 100%;text-align: center;margin-bottom: 20px;">
			<span v-if="show" style="margin-bottom: 20px;font-size: 21px;">{{addoredit}}</span>
		</Row>
		<table style="display: block;width: 100%; font-size: 17px;">
			<tr>
				<th style=" display: inline-block;width: 25%;text-align: center;float: left;">段序</th>
				<th style=" display: inline-block;width: 25%;text-align: center;float: left;">上限</th>
				<th style=" display: inline-block;width: 25%;text-align: center;float: left;">下限</th>
			</tr>
			<tr v-for="(item,index) in data4" :key="index" style="width: 100%;">
				<td style="display: block;width: 25%;text-align: center;float: left;">{{item.subsectionSort}}</td>
				<td style="display: block;width: 25%;float: left;"><input type="number" v-model="item.subsectionEnd" style="margin: 0 auto; text-align:center;width: 80%;display: block;"></input>
				</td>
				<td style="display: block;width: 25%;float: left;"><input type="number" v-model="item.subsectionStart" style="margin: 0 auto; text-align:center;width: 80%;display: block;"></input>
				</td>
				<td style="display: block;width: 25%;float: left;text-align: center;">
					<Tooltip content="删除分数段" theme="light" placement="top">
						<Button v-if=" index===data4.length-1?true:false" @click="sortDel(item,index)" type="error" size="small"><i class="iconfont alicon-delete"></i></Button>
					</Tooltip>
					<Tooltip content="新增分数段" theme="light" placement="top">
						<Button v-if=" index===data4.length-1?true:false" @click="sortAdd(item,index)" type="success" size="small"><i class="iconfont alicon-add1"></i></Button>
					</Tooltip>
				</td>
			</tr>
		</table>
		<Row style="text-align: center;">
			<Col span="24" style="margin-top:15px">
			<Button type="ghost" @click="chance" icon="close-round" style="margin-right: 20px;">取消</Button>
			<Button type="primary" @click="savesort" icon="checkmark-round">保存</Button>
			</Col>
		</Row>
		</Col>
	</div>
</template>
<script>
	import api from "@/components/js/Apidomain.js"
	import { getsessionstorage, setsessionstorage } from '@/components/js/Localstorage'
	import axios from 'axios'
	export default {
		data() {
			return {
				confirm:false,
				listid:"",
				gradeSelect: "",
				gradeList: [],
				subjectSelect: "",
				subjectList: [],
				subsectionSort: "", //顺序（分数段）
				subsectionEnd: "", //上限
				subsectionStart: "", //下限
				columns: [{
						title: '段序',
						key: 'subsectionSort',
						align: 'center',
					},
					{
						title: '上限值',
						key: 'subsectionEnd',
						align: 'center',
					},
					{
						title: '下限值',
						key: 'subsectionStart',
						align: 'center',
					},
				],
				data1: [],
				data2: [],
				data3: [],
				data4: [],
				Id: "",
				ojbk: false,
				sortSettingHidden: false,
				show: false,
			}
		},
		computed: {},
		created() {
			this.getInitSubsectionParamSelect()
		},
		methods: {
			getInitSubsectionParamSelect: function() {
				var self = this;
				var gradeNoList;
				let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/getInitSubsectionParamSelect';
				this.$http.post(url, {}).then(function(response) {
						if(response.data.success == true) {
							self.gradeList = response.data.data.gradeNoList
							if(self.gradeList.length != 0) {
								self.gradeSelect = self.gradeList[0].value;
							}
							self.getSubsectionParamSelectByParamType();
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00295',
							duration: 10,
							closable: true
						});
					});
			},
			gradeSelectChange: function() {
				this.getSubsectionParamSelectByParamType()
			},
			getSubsectionParamSelectByParamType: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/getSubsectionParamSelectByParamType';
				this.$http.post(url, {
						"no": this.gradeSelect,
						"flag":"1",
					}).then(function(response) {
						if(response.data.success == true) {
							//							console.log(response.data.data)
							self.subjectList = response.data.data.subjectList
							if(self.subjectList.length != 0) {
								self.subjectSelect = self.subjectList[0].value;
							}
							self.findOne()
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00296',
							duration: 10,
							closable: true
						});
					});
			},
			subjectSelectChange: function() {
				this.findOne()
			},
			findOne: function() {
				var self = this;
				let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/findOne'
				this.$http.post(url, {
						"gradeNo": this.gradeSelect,
						"subjectId": this.subjectSelect,
						"subsectionType": 3
					}).then(function(response) {
						if(response.data.success == true) {
							self.data1 = response.data.data.subsectionParamSetDetailList
							self.listid=response.data.data.id
							if(self.data1.length == 1 && self.data1[0].subsectionSort == "") {
								self.data1[0].subsectionSort = "第1段"
							}
							self.Id = response.data.data.id
						} else if(response.data.success == false) {
							self.$Message.error({
								content: response.data.msg,
								duration: 10,
								closable: true
							});
						}
					})
					.catch(function(error) {
						self.$Message.error({
							content: '系统发生错误:错误码00297',
							duration: 10,
							closable: true
						});
					});
			},
			initialization:function(){
				var self=this;
				let url=api.apidomain+'/tqes/web/tchSubsectionParamDefine/initialization'
				this.$http.post(url,{
					"id":this.listid,
				}).then(function(response){
					if(response.data.success==true){
						self.findOne()
					}else if(response.data.success==false){
						self.$Message.error({
							content:response.data.msg,
							duration:10,
							closable:true
						});
					}
				}).catch(function(error){
					self.$Message.error({
						content:'系统发生错误：错误码00333',
						duration:10,
						closable:true
					});
				});
			},
			cancelmodel:function(){
				this.confirm=false
				this.findOne()
			},
			edit: function() {
				this.show = true
				this.data4 = JSON.parse(JSON.stringify(this.data1)); //vue的深浅拷贝,防止data4随着data1变化
				this.addoredit = "分数段编辑"
				this.sortSettingHidden = true;
				if(this.data4.length == 0) {
					this.data4.push({
						subsectionSort: "第" + (this.data4.length + 1) + "段",
						subsectionEnd: "",
						subsectionStart: ""
					})
				}
			},
			chance: function() {
				this.sortSettingHidden = false;
			},
			savesort: function() {
				this.data3 = JSON.stringify(this.data4)
				var self = this;
				for(var i = 0; i < this.data4.length; i++) {
					console.log(this.data4[i])
					if(this.data4[i].subsectionStart == "" && this.data4[i].subsectionEnd == "") {
						this.$Message.error({
							content: '上下限均为空，请删除',
							duration: 10,
							closable: true
						})
						this.ojbk = false
						break;
					} else if(this.data4[i].subsectionStart != "" && this.data4[i].subsectionEnd != "") {
						if(this.data4[i].subsectionStart < 0 || this.data4[i].subsectionEnd < 0) {
							this.$Message.error({
								content: '上下限不能为负数',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else if(parseFloat(this.data4[i].subsectionEnd) == 0) {
							this.$Message.error({
								content: '上限不能为0',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else if(parseFloat(this.data4[i].subsectionEnd) <= parseFloat(this.data4[i].subsectionStart)) {
							console.log(this.data4[i].subsectionEnd)
							console.log(this.data4[i].subsectionStart)
							this.$Message.error({
								content: '同一段的上限不能小于等于下限',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else if(this.data4[i + 1] != undefined && parseFloat(this.data4[i].subsectionStart) < parseFloat(this.data4[i + 1].subsectionEnd)) {
							this.$Message.error({
								content: '上一段的下限不能小于下一段的上限',
								duration: 10,
								closable: true
							})
							this.ojbk = false
							break;
						} else {
							this.ojbk = true
						}
					} else if(this.data4[i].subsectionStart != "" && this.data4[i].subsectionEnd == "") {
						this.$Message.error({
							content: '同一段存在下限，上限不能为空',
							duration: 10,
							closable: true
						})
						this.ojbk = false
						break;
					} else if(this.data4[i].subsectionStart == "" && this.data4[i].subsectionEnd != "") {
						this.$Message.error({
							content: '同一段存在上限，下限不能为空',
							duration: 10,
							closable: true
						})
						this.ojbk = false
						break;
					} else {
						this.ojbk = true
					}
				}
				if(this.ojbk == true) {
					let url = api.apidomain + '/tqes/web/tchSubsectionParamDefine/save'
					this.$http.post(url, {
							"id": this.Id, //新增的时候为空
							"subsectionDefine": this.data3,
							"gradeNo": this.gradeSelect,
							"subjectId": this.subjectSelect,
							"subsectionType": 3 //分段类型 1:分数段划分设置 2:各学科等级比例设置
						})
						.then(function(response) {
							if(response.data.success == true) {
								//							console.log(response.data.data)
								self.$Message.success({
									content: '保存成功',
									duration: 10,
									closable: true
								});
								self.sortSettingHidden = false;
								self.findOne()
//								window.location.reload()
							} else if(response.data.success == false) {

								self.$Message.error({
									content: response.data.msg,
									duration: 10,
									closable: true
								});
							}
						})
						.catch(function(error) {

							self.$Message.error({
								content: '系统发生错误:错误码00298',
								duration: 10,
								closable: true
							});
						});
				}
			},
			sortDel: function(item, index) {
				this.data4.pop()
				if(this.data4.length == 0) {
					this.data4.push({
						subsectionSort: "第" + (this.data4.length + 1) + "段",
						subsectionEnd: "",
						subsectionStart: ""
					})
				}
			},
			sortAdd: function(item, index) {
				this.data4.push({
					subsectionSort: "第" + (this.data4.length + 1) + "段",
					subsectionEnd: "",
					subsectionStart: ""
				})
			}

		},
		watch: {

		}
	}
</script>

<style lang="css" scoped>

</style>